<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>新闻列表</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none;
			}
			a:hover{
				color:white;
				background-color:black;
			}
			h1{
				color:red;
				background-color:black;
				text-align:center;
				padding:20px 0;
				border:4px solid white;
			}
			.ul1{
				height:50px;
				width:100%;
				background-color:pink;
			}
			.ul1 li{
				height:50px;
				width:23%;
				text-align:center;
				line-height:30px;
				margin: 10px 0;
				float:left;
			}
			.ol1{
				height:50px;
				width:100%;
				background-color:lightgreen;
			}
			.ol1 li{
				height:50px;
				width:23%;
				text-align:center;
				line-height:30px;
				float:left;
			}
			div{
				width:100%;
				height:200px;
				float:left;
			}
			.ol2,.ol3,.ol4,.ol5,.ol6,.ul2,.ul3,.ul4{
				width:100px;
				height:200px;
				margin:0 45px;
				float:left;
			}
			.ol2 li,.ol3 li,.ol4 li,.ol5 li,.ol6 li,.ul2 li,.ul3 li,.ul4 li{
				width:100px;
				height:50px;
				text-align:center;
				line-height:50px;
				background-color:blue;
				color:black;
				
			}
		</style>
	</head>
	<body>
		<h1>新闻列表---科技</h1>
		<!--img src="img/1.png"/-->
		<hr>
		<ul class="ul1">
			<li><a href="#">世界杯的战况</a></li>
			<li><a href="#">NBA季前赛战况</a></li>
			<li><a href="#">新西兰足球杯战况</a></li>
			<li><a href="#">CBA篮球赛事</a></li>
		</ul>
		<ol class="ol1">
			<li><a href="#" target="_blank">世界杯的战况</a></li>
			<li><a href="#" target="_blank">NBA季前赛战况</a></li>
			<li><a href="#">新西兰足球杯战况</a></li>
			<li><a href="#">CBA篮球赛事</a></li>
		</ol>
		<div>
			<ol type="1" class="ol2">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ol>
			<ol type="a" class="ol3">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ol>
			<ol type="A" class="ol4">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ol>
			<ol type="I" class="ol5">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ol>
			<ol type="i" class="ol6">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ol>
			<ul type="disc" class="ul2">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ul>
			<ul type="circle" class="ul3">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ul>
			<ul type="square" class="ul4">
				<li>篮球</li>
				<li>唱歌</li>
				<li>跳舞</li>
			</ul>
		</div>
		
	</body>
</html>
